<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style type="text/css">
		*{margin: 0;padding: 0;}
		th,td{
			text-align: center;
		}
		.edit{
			float: left;
		}
		.window{
			display: none;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.2); 
		}
		.tianjia{
			padding: 20px;
			width: 220px;
			height: 400px;
			margin: 0px auto;
			background-color: #d4dfdd;
		}
		p{
			margin: 0 auto;
			padding: 20px;
		}
		#tem{
			display: none;
		}
		.kk{
			display: none;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.2); 
		}
		.kkk{
			width: 850px;
			height: 100px;
			margin: 50px auto;
		}
		.kkk .ha{
			float: left;
			border-radius: 0px;
			background-color: #fff;
		}
		.kk .ku{
			width: 795px;
			height: 100px;
			float: left;
			background-color: #fff;
		}
		.ku span{
			border: 1px solid #000;
			display: inline-block;
			width: 110px;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
		.hh{
			background-color: #b8b7ee;
			border: none;
			padding: 5px;
			border-radius: 3px 5px;
		}
	</style>
	<script src="jquery.min.js"></script>
	<script type="text/javascript">
		//查询更新数据
		$(function(){
				$.ajax({
					url:"http://192.168.0.103:81/getdata",
					success(data){
						var cr = JSON.parse(data)
						cr.forEach(function(item){
							newtr = $("#tem").clone(true);
							newtr[0].querySelector(".id").innerHTML = item.id;
							newtr[0].querySelector(".name").innerHTML = item.name;
							newtr[0].querySelector(".sex").innerHTML = item.sex;
							newtr[0].querySelector(".age").innerHTML = item.age;
							newtr[0].querySelector(".gongzi").innerHTML = item.gongzi;
							newtr[0].querySelector(".dizhi").innerHTML = item.dizhi;
							newtr[0].querySelector(".tel").innerHTML = item.tel;
							newtr[0].id="";
							$("tbody")[0].append(newtr[0]);
						})
					},
					error(){
						console.log("请求失败")
					}
				})
			$(".select").click(function(){
					$(".kk").css({"display":"block"});
					$(".no").click(function(){
						$(".kk").css({"display":"none"});
					})
					$.ajax({
						url:"http://192.168.0.103:81/chaxun",
						data:{
							id:$("#schoolId").val(),
						},
						success(data){
							var cx = JSON.parse(data)
							cx.forEach(function(item){
								news = $(".ku").clone(true);
								news[0].querySelector(".id").innerHTML = item.id;
								news[0].querySelector(".name").innerHTML = item.name;
								news[0].querySelector(".sex").innerHTML = item.sex;
								news[0].querySelector(".age").innerHTML = item.age;
								news[0].querySelector(".gongzi").innerHTML = item.gongzi;
								news[0].querySelector(".dizhi").innerHTML = item.dizhi;
								news[0].querySelector(".tel").innerHTML = item.tel;
								news[0].className="";
								$(".ku")[0].append(news[0]);
							})
						},
						error(){
							console.log("请求失败")
						}
					})
				})

		})
		//修改参数
		$(function(){
			 $("td").click(function(){
              if(!$(this).hasClass("edit") && !$(this).find('input').length){
                var input = document.createElement("input");
                var inp=document.getElementsByTagName("input");
                console.log(inp)
                var txt =$(this).html();
                $(this).html("");
                $(this).append(input);
                input.value = txt;
                input.focus();
                var _this = this;
                $(input).blur(function(){
                	$(_this).html($(input).val());
                	val = $(input).val();
                	className = _this.className;
                	newid = $(_this).parents("tr").find("td")[0].innerHTML;
 
                	//发送修改数据请求
                	$.ajax({
						url:"http://192.168.0.103:81/gai",
						data:{
								name:className,
								value:val,
								id:newid,

							},
						})
	                })
                }
            })
		})

		//添加数据
		$(function(){
			$(".insertData").click(function(){
				$(".window").css({"display":"block"});
				$(".no").click(function(){
					$(".window").css({"display":"none"});
				})
				$(".yes").click(function(){
					$(".window").css({"display":"none"});
						$.ajax({
							url:"http://192.168.0.103:81/tianjia",
							data:{
								id:$("#id").val(),
								name:$("#name").val(),
								sex:$("#sex").val(),
								age:$("#age").val(),
								gongzi:$("#gongzi").val(),
								dizhi:$("#dizhi").val(),
								tel:$("#tel").val()
							},
							success(data){
								if(data == "success"){
									alert("添加成功")
								}
								else{
									alert("添加失败")
								}
							},
							error(){
								console.log("请求失败")
							}
						})
					})

				})
			$(".deleat").click(function(){
				$(this).parents("tr").remove();
				var newid = $(this).parents("tr").find("td")[0].innerHTML;
						$.ajax({
							url:"http://192.168.0.103:81/delete",
							data:{
								id:newid,
							},
							success(data){
								if(data == "success"){
									alert("删除成功")
								}
								else{
									alert("删除失败")
								}
							},
							error(){
								console.log("请求失败")
							}
						})
				})
		})
	</script>
</head>
<body>
		<table class="table table-bordered table-hover">
  		<thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>薪资</th>
            <th>地址</th>
            <th>电话</th>
            <th class="edit"><input id="schoolId" type="" name=""><button type="button" class="select btn btn-primary btn-sm">查询</button></th>
          </tr>
        </thead>
        <tbody>
          <tr>
              <td>0</td>
	          <td>张三</td>
	          <td>男</td>
	          <td>20</td>
	          <td>5000</td>
	          <td>陕西</td>
	          <td>13630202837</td>
	          <td class="edit">
	            <span class="insertData"><button type="button" class="btn btn-primary btn-xs">添加</button></span>
	              <span class="deleat"><button type="button" class="btn btn-primary btn-xs">删除</button></span>
	          </td>
          </tr>
           <tr id="tem">
           		<td class="id"></td>
           		<td class="name"></td>
                <td class="sex"></td>
                <td class="age"></td>
                <td class="gongzi"></td>
                <td class="dizhi"></td>
                <td class="tel"></td>
                <td class="edit">
                     <span class="insertData"><button type="button" class="btn btn-primary btn-xs">添加</button></span>
	            <span class="deleat"><button type="button" class="btn btn-primary btn-xs">删除</button></span>
                  </td>
            </tr>
</table>
		<div id="k" class="window">
			<div class="tianjia">
				编号： <input type="text" id="id" name="" placeholder="请输入...">
				姓名： <input type="text" id="name" name="" placeholder="请输入...">
				性别： <input type="text" id="sex" name="" placeholder="请输入...">
				年龄： <input type="text" id="age" name="" placeholder="请输入...">
				薪资： <input type="text" id="gongzi" name="" placeholder="请输入...">
				地址： <input type="text" id="dizhi" name="" placeholder="请输入...">
				电话： <input type="text" id="tel" name="" placeholder="请输入...">
				<p><button class="yes hh"><a href="http://192.168.0.103:81/index.html">确认添加</a></button>
					<button class="no hh"><a href="http://192.168.0.103:81/index.html">确定取消</a></button></p>
			</div>
		</div>
		<div class="kk">
			<div class="kkk">
			<div class="ku">
				<span class="id">编号</span>
				<span class="name">姓名</span>
				<span class="sex">性别</span>
				<span class="age">年龄</span>
				<span class="gongzi">薪资</span>
				<span class="dizhi">地址</span>
				<span class="tel">电话</span>
			</div>
			<button class="no hh ha"><a href="http://192.168.0.103:81/index.html">返回</a></button></p>
			</div>
		</div>
</body>
</html>